import React from "react";
import { Button, Form, Input, Toast } from "antd-mobile";
import axios from "axios";
const Login = () => {
  // 定义手机号正则表达式
  const tel = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/

  // 表单提交事件
  const onFinish = async (value) => {
    console.log('登录数据', value);
    // 发送登录请求
    const resp = await axios.post('/api/login', value)
    // 解析返回数据
    const {code, data, message } = resp.data
    // 判断返回码
    if(code === 10000) {
      // 显示成功提示
      Toast.show({
        content: message,
        icon: 'success'
      })
      // 跳转页面

      // 存储用户信息
    } else {
      // 显示失败提示
      Toast.show({
        content: message,
        icon: 'fail'

      })
    }
  };
  return (
    <div>
      <Form
        onFinish={onFinish}
        footer={
          <Button block type="submit" color="primary" size="large">
            登录
          </Button>
        }
      >
        <Form.Header>
          <h1 style={{ textAlign: "center" }}>用户登录</h1>
        </Form.Header>
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: "请输入用户名",
            },
            // {
            //   pattern: tel,
            //   message: "用户名必须是手机号",
            // }
          ]}
        >
          <Input placeholder="请输入用户名"></Input>
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: "请输入密码",
            },
          ]}
        >
          <Input placeholder="请输入密码"></Input>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Login;
